import React, { useEffect, useState } from 'react'
import { useLocation, useParams } from 'react-router-dom'
import { CartO, ChatO, ShopO } from '@react-vant/icons'
import { ActionBar } from 'react-vant'
import { useDispatch } from 'react-redux'
const Index = () => {
  // 获取id  来自于路径 （动态路由）;
  const location = useLocation();
  const item = location.state
  const dispatch = useDispatch()
  // 加入购物车
  const addToCart = () => {
    // 通过 redux 将输入到购物车仓库
    // dispatch action
    dispatch({ type: 'addToCart', payload: item })
  }

  return (
    <div>
      <img src={item.image} alt="" width="100%" />
      <h3>{item.title}</h3>
      <p className="price">{item.price}</p>
      <ActionBar>
        <ActionBar.Icon
          icon={<ChatO />}
          text='客服'
          onClick={() => console.log('chat click')}
        />
        <ActionBar.Icon
          icon={<CartO />}
          text='购物车'
          onClick={() => console.log('cart click')}
        />
        <ActionBar.Icon
          icon={<ShopO />}
          text='店铺'
          onClick={() => console.log('shop click')}
        />
        <ActionBar.Button
          type='danger'
          text='立即购买'
          onClick={() => addToCart()}
        />
      </ActionBar>
    </div>
  )
}

export default Index

// const arr =[  {
//   "id": "1",
//   "image": "http://dummyimage.com/200x200/79f1f2",
//   "title": "达结类元而己即装世角思号做历严七已已门几精作地地江那身包",
//   "price": 388
// },   {
//   "id": "2",
//   "image": "http://dummyimage.com/200x200/79f1f2",
//   "title": "达结类元而己即装世角思号做历严七已已门几精作地地江那身包",
//   "price": 388
// },   {
//   "id": "3",
//   "image": "http://dummyimage.com/200x200/79f1f2",
//   "title": "达结类元而己即装世角思号做历严七已已门几精作地地江那身包",
//   "price": 388,
//   count: 1
// },]


// const v =   {
//   "id": "310000199108011566",
//   "image": "http://dummyimage.com/200x200/79f1f2",
//   "title": "达结类元而己即装世角思号做历严七已已门几精作地地江那身包",
//   "price": 388
// }